<!-- 预警预案信息列表 -->
<template>
  <div class="w-100 h-100 searchForm">
    <div style="height: 80px; display: flex;justify-content: space-between;">
      <div>
      <proSelect
        :optionsData="optionsData"
        :defaultSelectValue="0"
        v-model:select-value="left_value"
        :width="150"
      >
      </proSelect>
      <proSelect
        :optionsData="companyOptionsData"
        :defaultSelectValue="0"
        v-model:select-value="left_value"
        :width="150"
      >
      </proSelect>
      <el-input
        placeholder="请输入"
        v-model="inputValue"
        size="large"
        class="searchInput"
      >
       <template #suffix>
        <el-icon class="el-input__icon"><search /></el-icon>
      </template>
      </el-input>
      </div>
      <el-button type="primary" @click="addYuAn" class="searchBtn"
        ><el-icon><Plus /></el-icon>新增预案</el-button
      >
    </div>
    <CustomTableVue
      :field-list="useFields().spongEmergencyInfoFiield"
      :table-data="tableData"
      height="calc(85% - 80px)!important"
    >
      <template #jump="slotProps">
        <div class="btn" style="display: flex">
          <div @click="editYuAn(slotProps.row)">
            <el-icon>
              <Edit />
            </el-icon>
          </div>
          <div @click="infoYuAn(slotProps.row)">
            <el-icon><Warning /></el-icon>
          </div>
        </div>
      </template>
    </CustomTableVue>
  </div>
</template>

<script setup lang='ts'>
import CustomTableVue from "@/components/common/table/CustomTable.vue";
import { useFields } from "@/hook/useFields";
import { useFunc } from "@/hook/useFunc";
import Mitt from "@/utils/mitt"
import proSelect from "@/components/project/proSelect.vue";
const optionsData = [
  { label: "洪涝灾害", value: 0 },
  { label: "自然灾害", value: 1 },
  { label: "雨雪冰冻灾害", value: 2 },
  { label: "突发环境事件", value: 3 },
];
const companyOptionsData = [
  { label: "a制定单位", value: 0 },
  { label: "b制定单位", value: 1 },
  { label: "c制定单位", value: 2 },
  { label: "d制定单位", value: 3 },
];
const left_value = "";
const inputValue = "";
// const tableData = ref([
// {
//     Area:'鹦鹉街道',
//     code:'预案编号1',
//     name:'xxxx',
//     department:'应急部门',
//     time:'2022-10-2',
//     address:'晴川街道龙灯里小区'
// },

// ]);
const tableData = useFields()
  .fakeDataSoong.filter((item: any) => item.type === "预警")
  .map((item: any) => item.special_attributes);
function addYuAn() {
  Mitt.emit("js-addYuAn",{titleName:'新增预案',res:{}}); 
}
function editYuAn(res){
 Mitt.emit("js-addYuAn",{titleName:'编辑预案',res}); 
}
function infoYuAn(res){
 Mitt.emit("js-addYuAn",{titleName:'预案详情',res})
}
</script>
 
<style scoped lang="less">
.btn {
  color: #1bfbfa;
  font-weight: 500;
  justify-content: center;
  font-size: 24px;
  div {
    margin-right: 10px;
  }
}
/deep/ .searchForm {
  .el-input__wrapper {
    font-size: 20px;
    background: rgba(48, 82, 95, 0.62) !important;
    box-shadow: 0 0 0 1px #4fb9cf inset !important;
  }
}
.searchInput {
  height: 40px;
  line-height: 40px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #8ba6ad; /*  */
  width: 240px;
}
.searchBtn{
  background: rgba(27,251,250,0.23);
border-radius: 4px 4px 4px 4px;
border: 1px solid #1BFBFA;
color: #1BFBFA;
line-height: 40px;
height: 40px;
}
</style>